<script setup lang="ts">
import { reactive } from 'vue'
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import axios from 'axios'
const data = ref('')
const formInline = reactive({
  user: '',
  region: '',
})

const onSubmit = () => {
  console.log('submit!')
}

const oncz = () => {
  formInline.user = ''
  formInline.region = ''
}

const tableData = data
const dialogVisible=ref(false)
//    添加
// const dialogVisible = (formLabelAlign.username, formLabelAlign.phone, formLabelAlign.password) => {
//   //  上传
//   axios.post('http://localhost:3000/posts', {
//     formLabelAlign.username, formLabelAlign.phone, formLabelAlign.password,formLabelAlign.type
//   }).then((result) => {
//     console.log(result);

//   }).catch((err) => {
//     console.log(err);
//   });
//   ref(false)
// }

//   ////////////
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const labelPosition = ref('right')

const formLabelAlign = reactive({
  username: '',
  phone: '',
  password: '',
  type: '',
})

//  修改
const dialogVisibleT = ref(false)

const handleCloseT = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}

const labelPositionT = ref('right')

const formLabelAlignT = reactive({
  username: '',
  phone: '',
  password: '',
  type: '',
})

// 请求
const qq = axios.get("http://localhost:3000/users").then((result) => {
  console.log(result);
  data.value = result.data
}).catch((err) => {
  console.warn(err);
}).then(function () {
  // 总是会执行
});;




</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="80%"><el-col :span="24">

          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名">
              <el-input v-model="formInline.user" placeholder="请输入" />
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="formInline.region" placeholder="请输入" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" color="#eee" @click="oncz">重置</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

            <el-dropdown>
              <span class="el-dropdown-link">
                展开
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>1</el-dropdown-item>
                  <el-dropdown-item>2</el-dropdown-item>
                  <el-dropdown-item>3</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

          </el-form>

        </el-col>
      </el-aside>
      <el-main></el-main>
    </el-container>
  </div>


  <!-- 22222222222222222 -->
  <div class="common-layout">
    <el-container>
      <el-aside width="1000px">用户列表</el-aside>
      <el-main> <el-row class="mb-4"><el-button type="primary"
            @click="dialogVisible = true">添加用户</el-button></el-row></el-main>
    </el-container>
  </div>


  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="tableData.length" label="序号" width="80" />
    <el-table-column prop="username" label="用户名" width="80" />
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="password" label="密码" />
    <el-table-column prop="type" label="用户角色" />
    <el-table-column prop="" label="操作"> <el-row class="mb-2"><el-button type="primary"
          @click="dialogVisibleT = true">编辑</el-button><el-button type="danger"
          plain>删除</el-button></el-row></el-table-column>
  </el-table>

  <!-- 添加用户 -->
  <el-dialog v-model="dialogVisible" title="添加用户" width="30%" :before-close="handleClose">
    <span>
      <el-form :label-position="labelPosition" label-width="100px" :model="formLabelAlign" style="max-width: 460px">
        <el-form-item label="名字">
          <el-input v-model="formLabelAlign.username" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formLabelAlign.phone" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password" />
        </el-form-item>
        <el-form-item label="用户类型">
          <el-input v-model="formLabelAlign.type" />
        </el-form-item>
      </el-form></span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">确定
          <!-- @click="dialogVisible" -->
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--   添加     -->

  <!-- 修改用户 -->
  <el-dialog v-model="dialogVisibleT" title="修改用户" width="30%" :before-close="handleCloseT">
    <span> <el-form :label-position="labelPositionT" label-width="100px" :model="formLabelAlignT"
        style="max-width: 460px">
        <el-form-item label="名字">
          <el-input v-model="formLabelAlignT.username" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formLabelAlignT.phone" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlignT.password" />
        </el-form-item>
        <el-form-item label="用户类型">
          <el-input v-model="formLabelAlignT.type" />
        </el-form-item>
      </el-form></span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisibleT = false">取消</el-button>
        <el-button type="primary" @click="dialogVisibleT = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
